<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>财务-体现记录</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="./css/business.css">
</head>
<body>
<div id="uniocn" class="layui-layout layui-layout-admin">
    <div class="financeTitle">
        <button class="layui-btn layui-btn-ms">结算记录</button>
    </div>

    <div class="finance-record">
        <table class="layui-table" lay-skin="line">
            <colgroup>
                <col width="15%">
                <col width="15%">
                <col width="10%">
                <col width="15%">
                <col width="15%">
                <col width="15%">
                <col width="15%">
            </colgroup>
            <thead>
            <tr>
                <th>申请信息</th>
                <th>申请金额</th>
                <th>系统提成</th>
                <th>提现</th>
                <th>申请时间</th>
                <th>操作时间</th>
                <th>状态</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in record">
                <td>{{item.info}}</td>
                <td>{{item.price}}</td>
                <td>{{item.Extract}}</td>
                <td>
                    <div>
                        <button class="layui-btn layui-btn-primary layui-btn-xs" style="background: #ed5565;color: #fff;">代理申请提现</button><br>
                        <button class="layui-btn layui-btn-primary layui-btn-xs" style="margin-top: 5px;background: #d1dade;color: #fff;">未结算</button>
                    </div>
                </td>
                <td>{{item.time}}</td>
                <td>{{item.time}}</td>
                <td>
                    <div>
                    <button class="layui-btn layui-btn-primary layui-btn-xs" style="background: #23c6c8;color: #fff;">系统审核中</button>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="4" v-if="record.length<=0">暂无数据</td>
            </tr>
            </tbody>
        </table>
        <div id="test1"></div>
    </div>

</div>

<script src="layui/layui.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/vue2.5.16.js"></script>
<script>
    layui.use(['form','laydate','laypage'], function () {
        var form = layui.form;
        var laydate = layui.laydate;
        var laypage = layui.laypage;
        //年月范围选择
        laydate.render({
            elem: '#test',
            range: true //或 range: '~' 来自定义分割字符
        });
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: 50 //数据总数，从服务端得到
        });
    })
    new Vue({
        el: "#uniocn",
        data: {
            record:[
                {info:"不晓得",price:"2000",Extract:'0.5%',time:"2017-08-12 12:23:10"}
            ]
        }
    })
</script>
</body>
</html>
